<template>
  <div class="all-page">
    <!-- 返回按钮 -->
    <el-button type="primary" class="back-button" @click="back">返回上级页面</el-button>

    <!-- 报审表 -->
    <div class="page">
      <div class="document-header">
        <h1 class="document-title">工程材料、构配件、设备报审表</h1>
      </div>
      <!-- 基本信息部分 - 在表格上方 -->
      <div>
        <div class="info-row">
          <div class="info-left">
            <span class="label">工程名称:</span>
            <span class="value kai-font">{{ projectName + '  ' + subprojectName }}</span>
          </div>
          <div class="info-right">
            <span class="label">编号:</span>
            <span class="value kai-font"></span>
          </div>
        </div>
      </div>
      <table class="main-table">
        <tr>
          <td class="table-cell">
            <div>
              <span class="label">致:</span>
              <span class="special-underline kai-font">{{ reportData.jianliCompanyName }}</span>
              <span>(项目监理机构)</span>
            </div>
            <div>
              <span class="blank-box"></span>
              <span>于</span>
              <span class="special-underline kai-font"
              >{{
                  reportData.fetchDateVO[0] + '年' + reportData.fetchDateVO[1] + '月' + reportData.fetchDateVO[2] + '日'
                }}</span>
              <span>进场的拟用于工程</span>
              <span class="special-underline kai-font">{{ reportData.usePart }}</span>
              <span>部位的</span>
              <span class="special-underline kai-font">钢筋原材</span>
              <span>，现将质量证明文件及自检结果报上，请予以审查。</span>
            </div>
            <div class="audit-text">
              <span>请予以审核。</span>
            </div>
            <div class="attachment-title">
              <span class="label">附件:</span>
              <div class="attachment-list">
                <div>1.材料进场验收记录</div>
                <div>2.产品质量证明书</div>
              </div>
            </div>
            <!-- 施工项目经理部盖章和签字 - 在附件下方 -->
            <div class="signature-container">
              <div class="signature-content">
                <div class="stamp-title">
                  <span class="label">施工项目经理部(盖章)</span>
                </div>
                <div class="signature-title">
                  <span class="label">项目经理(签字)</span>

                </div>
                <div class="date-line">
                  <span class="date-label">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td class="table-cell">
            <div class="review-title">
              <span class="label">审查意见:</span>
              <div class="review-area">
                <!-- 审查意见填写区域 -->
              </div>
            </div>
            <!-- 项目监理机构盖章和签字 - 在审查意见下方 -->
            <div class="signature-container">
              <div class="signature-content">
                <div class="stamp-title">
                  <span class="label">项目监理机构(盖章)</span>
                </div>
                <div class="signature-title">
                  <span class="label">专业监理工程师(签字)</span>
                </div>
                <div class="date-line">
                  <span class="date-label">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
                </div>
              </div>
            </div>
          </td>
        </tr>
      </table>
      <!-- 注部分 -->
      <div class="section">
        <div class="content">
          <div class="content-item">
            注：本表一式二份，项目监理机构、施工单位各一份。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@/router'
import { getBaoShenPreview } from '@/api/statementManage/wuZi/wuZi'

export default {
  data() {
    return {
      loading: true, // 这是一个加载标识
      reportData: {}, // 这是报表数据接收变量
      localStorageId: '', // 用于存储id
      taskId: '',
      subprojectName: '',
      projectName: ''
    }
  },
  async mounted() {
    const sessionData = sessionStorage.getItem('tempObj1')

    const parseData = JSON.parse(sessionData)
    this.projectName = parseData.projectName
    this.subprojectName = parseData.subprojectName
    const subprojectId = parseData.subprojectId

    const { result } = await getBaoShenPreview(subprojectId)
    this.reportData = result
  },
  beforeDestroy() {
    // 这个钩子函数用来退出的时候清除本地存储的数据 防止数据堆积在浏览器里
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId)
    }
    document
      .querySelector('body')
      .setAttribute('style', 'background-color: white;') // 还原，因为这是个全局样式
  },
  beforeCreate() {
    document
      .querySelector('body')
      .setAttribute('style', 'background-color:#f5f5f5;') // 设置对比色
  },
  methods: {
    back() {
      router.push({ path: '/menus/statement' })
    }
  }
}
</script>

<style scoped>
.all-page {
  width: 100%;
  padding-bottom: 5%;
}

/* 返回按钮样式 */
.back-button {
  position: fixed;
  top: 1.5rem;
  left: 6.25rem;
  z-index: 1000;
  background-color: #409eff;
  border-color: #409eff;
  color: white;
  font-size: 0.875rem;
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
}

.back-button:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.page {
  font-family: "Times New Roman", "宋体", sans-serif;
  padding: 4% 4% 0;
  width: 60%;
  aspect-ratio: 1 / 1.414;
  margin: 5% auto;
  background-color: white;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  line-height: 1.5rem;
}

.document-header {
  text-align: center;
  margin-bottom: 5%;
}

.document-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  padding: 2% 0;
}

.info-row {
  padding-left: 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info-left {
  display: flex;
  align-items: center;
  gap: 2%;
  min-width: 200px;
}

.info-right {
  display: flex;
  align-items: center;
  gap: 2%;
}

.label {
  font-weight: bold;
  white-space: nowrap;
}

.value {
  margin-right: 3%;
  white-space: nowrap;
  min-width: 3.75rem;
  max-width: 30rem;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.blank-box {
  display: inline-block;
  width: 2rem;
}

.kai-font {
  font-family: "Times New Roman", "楷体", "KaiTi", "STKaiti", sans-serif;
  font-size: 0.9375rem;
}

.main-table {
  width: 100%;
  border-collapse: collapse;
  border: 0.18rem solid #000;
}

.main-table td {
  border: 0.1rem solid #000;
  padding: 1.5%;
  text-align: left;
  vertical-align: middle;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}

/* 新增的样式类 */
.table-cell {
  text-align: left;
  padding: 2%;
  position: relative;
}

.audit-text {
  margin-bottom: 2%;
}

.attachment-title {
  margin-top: 3%;
}

.attachment-list {
  margin-left: 5%;
  margin-top: 1%;
}

.signature-container {
  margin-top: 3%;
  display: flex;
  justify-content: flex-end;
}

.signature-content {
  text-align: left;
  width: 20rem;
}

.stamp-title {
  margin-bottom: 1rem;
}

.signature-title {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

.review-title {
  margin-top: 3%;
}

.review-area {
  min-height: 10rem;
  margin-top: 1%;
  padding: 1%;
}

.special-underline {
  border-bottom: 0.0938rem solid #333;
  padding: 0 1rem 0.125rem;
  border-radius: 0.0625rem;
  min-height: 1.45831rem;
  min-width: 4.0313rem;
}

.section {
  font-size: 0.9375rem;
}

.section .content {
  margin: 1% 0 0;
}

.content-item {
  text-indent: 0;
  text-align: left;
}

.date-line {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.date-label {
  font-weight: bold;
  font-size: 1.1rem;
  letter-spacing: 0.5rem;
}

@media print {
  @page {
    size: A4 portrait;
  }
}
</style>
